<template>
    <div style="padding:4vw;border-bottom:1px solid #cecece;" class="comments">
        <h5 style="font-size:15px;color:#333333">
          <img src="@/assets/helpServerIcon/red.png"
               style="height:14px;display:inline-block;margin-right:10px;font-weight:100;width: 2vw;"/>评论</h5>
        <ul v-if="commetList.list.length>0">
            <li v-for="(item,index) in commetList.list" :key="index">
                <div>
                    <div class="headIcon">
                        <img :src="item.head_ico" alt="">
                    </div>
                    <span style="diaplay:inline-block;margin-left: 3vw;color:#666666;font-size:13px">{{item.user_name}}</span>
                    <div v-if="item.is_thumb" class="zan" style="color:#FF4C50;font-size:12px">
                        <img src="@/assets/helpServerIcon/red_fabulous.png" alt="" style="width:16px"/>
                        <span>{{item.thumb_number}}</span>
                    </div>
                    <div v-else class="zan">
                        <img src="@/assets/helpServerIcon/fabulous.png" alt="" />
                        <span>{{item.thumb_number}}</span></div>
                </div>
                <div class="commetContent">
                    {{item.contents}}
                </div>
                <p class="commentTime">{{item.create_time}} <span style="float:right">回复</span></p>
                <ul v-if="item.reply.list.length>0">
                    <li v-for="(item1,index1) in item.reply.list" :key="index1" style="padding:3vw;background:#f5f5f5;margin-left:11vw">
                        <span style="font-size:12px">{{item1.user_name}}：{{item1.contents}}</span>
                    </li>
                </ul>
            </li>
        </ul>
        <div v-else style="margin-top:4vw;text-align:center">
            喜欢TA就留下评论，成为第一个评论的人吧
        </div>
        <div style="text-align:center;padding:3vw;border-top: 1px solid #cecece;"  v-if="commetList.list.length>0">
            全部评论
        </div>
    </div>
</template>

<script>
    export default {
      name: "commet",
      data(){
        return{
        }
      },
      props:['commetList'],
      methods:{
      },
      mounted(){
        this.focu=this.is_care
      }
    }
</script>

<style scoped lang="scss">
  .comments{
 .headIcon{
     width: 8vw;
     height:8vw;
     border-radius: 50%;
     overflow: hidden;
     float:left;
     img{
         width:100%;
         height: 100%;
     }
 }
 .zan{
     float:right;
     width: 50px;
     color:#666666;
     text-align: right;
     img{
         display:inline-block;
       width: 4vw;
     }
 }
 .commetContent{
     margin: 1vw 0;
     padding-left: 11vw;
     color:#333333;
     font-size:13px;
 }
 .commentTime{
     font-size:11px;
     color:#666666;
     margin-bottom: 4vw;
     padding-left: 11vw;
 }}
</style>
